// 单行省略号
@mixin toe() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

// 多行省略号
@mixin bov($num: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

@for $i from 1 through 5 {

  // 文本省略
  .ov-#{$i} {
    @include bov($i);
  }
}


@for $i from 1 through 50 {
  .fw-#{$i} {
    font-weight: ($i * 100) !important;
  }

  // 字体大小
  .fz-#{$i} {
    font-size: ($i * 2) + rpx !important;
  }

  // 高度
  .h-#{$i} {
    height: ($i * 2) + rpx !important;
  }

  // 宽度
  .w-#{$i} {
    width: ($i * 2) + rpx !important;
  }

  // 行高
  .linh-#{$i} {
    line-height: ($i * 2) + rpx !important;
  }

  // 圆角
  .br-#{$i} {
    border-radius: ($i * 2) + rpx !important;
  }

  // 内边距
  .pa-#{$i} {
    padding: ($i * 2) + rpx;
  }

  // 上内边距 案例：pt-20 就是上边距20px
  .pt-#{$i} {
    padding-top: ($i * 2) + rpx;
  }

  .pr-#{$i} {
    padding-right: ($i * 2) + rpx;
  }

  .pb-#{$i} {
    padding-bottom: ($i * 2) + rpx;
  }

  .pl-#{$i} {
    padding-left: ($i * 2) + rpx;
  }

  .px-#{$i} {
    padding-left: ($i * 2) + rpx !important;
    padding-right: ($i * 2) + rpx !important;
  }

  .py-#{$i} {
    padding-top: ($i * 2) + rpx !important;
    padding-bottom: ($i * 2) + rpx !important;
  }

  .p-#{$i} {
    padding: ($i * 2) + rpx !important;
  }

  // 外边距
  .ma-#{$i} {
    margin: ($i * 2) + rpx;
  }

  .mt-#{$i} {
    margin-top: ($i * 2) + rpx;
  }

  .mr-#{$i} {
    margin-right: ($i * 2) + rpx;
  }

  .mb-#{$i} {
    margin-bottom: ($i * 2) + rpx;
  }

  .ml-#{$i} {
    margin-left: ($i * 2) + rpx;
  }

  .mx-#{$i} {
    margin-left: ($i * 2) + rpx !important;
    margin-right: ($i * 2) + rpx !important;
  }

  .my-#{$i} {
    margin-top: ($i * 2) + rpx !important;
    margin-bottom: ($i * 2) + rpx !important;
  }

  .left-#{$i} {
    left: ($i * 2) + rpx !important;
  }

  .top-#{$i} {
    top: ($i * 2) + rpx !important;
  }

  .right-#{$i} {
    right: ($i * 2) + rpx !important;
  }

  .bottom-#{$i} {
    bottom: ($i * 2) + rpx !important;
  }

  .gap-#{$i} {
    gap: ($i * 2) + rpx;
  }

  .grid-col-#{$i} {
    grid-template-columns: repeat(#{$i}, 1fr);
  }
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.left-0 {
  left: 0;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.overflow-hidden {
  overflow: hidden;
}

.pa-0 {
  padding: 0;
}

.ma-0 {
  margin: 0;
}

.bgf {
  background-color: #ffffff;
}

// 弹性盒子
.disFlx {
  display: flex;
}

.grid {
  display: grid;
}

.disFlexCol {
  display: flex;
  flex-direction: column;
}

// 弹性盒子，上下居中
.disFlxAC {
  display: flex;
  align-items: center;
}

.disFlxJC {
  display: flex;
  justify-content: center;
}

// 弹性盒子，左右布局，上下居中
.disFlxJS {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flexEnd {
  justify-content: flex-end;
}

.a-end {
  align-items: flex-end;
}

.disFlxCC {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.justify-around {
  justify-content: space-around;
}

.justify-between {
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-center {
  justify-content: center;
}

.fontTC {
  text-align: center;
}

.font-bold {
  font-weight: bolder;
}

.borderBottom {
  border-bottom: solid 1px #f5f5f5;
}

.gutter-btn {
  flex: 1;
  flex-shrink: 0;
  position: relative;
  // background-color: #fff;
  // border-radius: 44rpx;
}

.gutter-btn+.gutter-btn {
  margin-left: 20rpx;
}

.default-color {
  color: #333;
}

.text-nowrap {
  white-space: nowrap;
}

.bg-white {
  background-color: #fff;
}

.color-white {
  color: #fff;
}

.break-all {
  word-break: break-all;
}